<template>
    <!-- 标签svg：图标外层容器节点， 内部需要与标签use结合使用 -->
    <!-- 标签svg的样式style : 设置svg的大小   https://www.bilibili.com/video/BV1Xh411V7b5?t=497.4&p=24  -->
    <svg :style="`width: ${iconWidth}; height: ${iconHeight};`">
      <!-- xlink:href 指定 图标文件，属性值 形如 '#icon-图标文件名' -->
      <!-- use标签的fill属性 可以设置 svg图标 的颜色  -->
      <use :xlink:href="prefix+fileShortName" :fill="iconColor"></use>
    </svg>
  </template>
  
  <script setup lang="ts">
  //接收父组件传递过来的参数
  defineProps({
    //组件参数: xlink:href属性值的前缀
    prefix: {
      type: String,
      default: '#icon-'
    },
    //组件参数: 接收父组件传递的svg图标文件名
    fileShortName: String,
    //组件参数: 接收父组件传递的图标颜色
    iconColor: {
      type: String ,
      default: ''
    },
    //组件参数: 接收父组件传递的图标宽度
    iconWidth:{
      type:String,
      default: '16px'
    },
    //组件参数: 接收父组件传递的图标高度
    iconHeight:{
      type:String,
      default: '16px'
    }
  })
  </script>
  
  <style scoped>
  
  </style>